import { Component, OnInit,Input,Output,ElementRef,EventEmitter,SimpleChanges} from '@angular/core';
import * as echarts from "echarts";
import { ECharts } from "echarts";
import { OnChanges, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
// import {ChartService} from '../../services/chart.service'
declare const require: any;


@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit,OnChanges,OnDestroy {

  options: any;
  myChart:ECharts;

  tableWithHTML:any[]=[{
    name: '火锅',
    date: 2017,
    address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
  }, {
    name: '重庆小面',
    date: '2017-08-20',
    address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
  }, {
    name: '海蛎煎',
    date: '2017-08-21',
    address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
  }, {
    name: '榴莲酥',
    date: '2017-08-22',
    address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>',
  }]


  constructor(
    private el:ElementRef,
    // private chartservice:ChartService
  ) { }
  

  @Input() chart:any;
  @Input() chartShow:boolean;
  @Output() resizeEle=new EventEmitter<any>()
  public Ele:any;

  ngOnInit() {

    this.options={
      title: {
        show:true,
        text: '设备重大停机-value',
        backgroundColor:'rgba(167,255,80,0.5)',
        textStyle:{
          fontSize:12,
          color:'#333'
        }
      },
      tooltip: {
        trigger:'axis'
      },
      legend: {
        data: ['工厂']
      },
      xAxis: {
        type : 'category',
        boundaryGap : false,
        name:'厂区',
        data: ["DYPT", "DYSP", "JQCP", "JQNP", "JQSP", "NSSP",'WHPT']
      },
      yAxis: {
        type : 'value',
        name:'value',
        data:[20,30,40,50,60,70,80]
      },
      series: [{
        name: '线图',
        type: 'line',
        data: [0, 40, 55, 32, 50, 66,80],
        smooth:true
      }]
     }
  }

    
  ngOnChanges(changes:SimpleChanges):void{
    let params;
    
    // if(params != this.chartType){
    //   params = this.chartType;
    //   if(this.Ele){this.Ele.dispose()}  //每次change改变echart实例，防止内存泄漏
    //   this.Ele = echarts.init(this.el.nativeElement);  //绘制图表
    //   this.Ele.setOption(this.options)
    //   this.resizeEle.emit(this.Ele);         //resize图表
        
    // };
    
  }

  onDoCheck(){
    
  }

  ngOnDestroy(){
    // if(this.Ele){this.Ele.dispose()}
  }
  
}
